<template>
    <div class="table">
        <div v-if="list.length">
            <div class="table-header">
                <font>姓名</font>
                <font>网数</font>
                <font>时间</font>
                <font>结算价格</font>
            </div>
            <div v-for="item in list" :key="item.name" class="table-item">
                <font>{{item.name}}</font>
                <div class="net-number">
                    <p>一：{{item.oneNum}}</p>
                    <p>二：{{item.twoNum}}</p>
                </div>
                <font>{{item.time | getLocalTime}}</font>
                <font>{{item.price}}元</font>
            </div>

        </div>
        <div v-else class="not-data">暂无数据</div>
    </div>
</template>

<script>
import mixins from "@/mixins/mixins.js" 

export default {
    data(){
        return {
            list:[
                
                {
                    name:"范希美",
                    address:"中邓村",
                    oneNum:10,
                    twoNum:20,
                    time:"1663403397",
                    price:20,
                },
                                {
                    name:"小姨",
                    address:"中邓村",
                    oneNum:10,
                    twoNum:0,
                    time:"1663403397",
                    price:20,
                },
                                {
                    name:"王芬",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:20,
                },
                                {
                    name:"杨丽",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:20,
                },
                                {
                    name:"大姨",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:220,
                },
                                {
                    name:"大姨",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:220,
                },
                                {
                    name:"大姨",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:220,
                },
                                {
                    name:"大姨",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:220,
                },
                                {
                    name:"大姨",
                    address:"中邓村",
                    oneNum:0,
                    twoNum:0,
                    time:"1663403397",
                    price:220,
                },
            ]
        }
    },
    mixins:[mixins],
    filters:{
        getLocalTime(nS){
            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
        },
    },
    mounted() {
        
    },
    methods: {

    },
}
</script>

<style scoped lang="less">
.table{
    font-family: "微软雅黑";
    font-size: 1rem;
}
.table-header{
    width: 100%;
    height: 2rem;
    // margin: 1rem 0;
    // background-color: rgb(181, 181, 181);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.table-item{
    width: 100%;
    height: 4rem;
    margin-bottom: 1rem;
    background-color: rgb(236, 184, 255);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font{
        width: 20%;
        text-align: center;
    }
    .net-number{
        width: 20%;
        p{
            // text-align: center;
        }
    }
}
.not-data{
    text-align: center;
    margin: 0.5rem 0;
    font-size: 1rem;
}
</style>